<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#fff" size="26"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">我的关注</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right">
				</view>
			</view>
		</u-navbar>
		
		<view class="list" v-if="goodsList.length>0">
			<view class="followList" v-for="(item,index) in goodsList" :key="index">
				<view class="followBox" @tap="seeDetails(item)">
					<view class="focusPeople">
						<view class="focusPeopleImg" @tap="goHolder">
							<image style="border-radius: 50%;" :src="item.fileUrl" mode=""></image>
						</view>
						<view class="focusPeopleInfo">
							<view class="focusPeopleName">
								{{item.name}}
							</view>
							<view class="focusPeopleNumber">
								{{item.num>1000?'+1000':item.num}}&nbsp;人关注
							</view>
						</view>
					</view>
					<view @tap="takeOff(item,index)" class="followText">
						已关注
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="noData">
				<image class="noDataImg" src="../../static/noData.png" mode=""></image>
			</view>
		</view>
		
		<mix-loading ref="min_loading"></mix-loading>
		
		<u-popup :show="showModal" bg-color="#141414" :customStyle="{width:'620upx'}" mode="center">
			<view class="guanbi" @tap="showModal = false"></view>
			<view class="shop-tips">
				<view class="tip-title">确定要取消关注吗！</view>
				<view class="tip-text">
					<view class="text" @tap="showModal = false">
						点错了
					</view>
					<view class="text1" @tap="confirm">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getCollectionList,nftuserlike
	} from '../../api/user.js'
	export default {
		data() {
			return {
				showModal: false,
				goodsList: [],
				cancelAttenyion:{
					id:null,
					index:""
				},
				listQuery: {
					page: 1,
					pageSize:10,
					pages:1,
					status:"4",//4关注1收藏
				},
			}
		},
		onShow() {
			this.getNftList();
		},
		methods: {
			back() {
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
				    uni.navigateBack({  
				      delta: 1  
				    });  
				} else {  
				    history.back();  
				}
			},
			getNftList() {
				this.$nextTick(()=>{
					this.$refs.min_loading.open('加载中，请稍后！');
				});
				getCollectionList(this.listQuery).then(res => {
					// if (res.data.success) {
						this.listQuery.pages = res.data.obj.pages;
						
						let newList = res.data.obj.list.filter((item, index) => {
							item["fileUrl"] =  this.pathImg + item.fileUrl;
							item["name"] =  item.name;
							return item
						});
						if (this.listQuery.page == 1) {
							this.goodsList = [...newList];
						} else {
							this.goodsList = [...this.goodsList,...newList];
						}
				}).finally(() => {
					this.$refs.min_loading.close();
				});
			},
			// 判断这个地址是视频还是图片
			isImage(url) {
				if (!url) {
					return
				}
				let filePath = url.toLocaleLowerCase();
				if (filePath.indexOf(".mp4") != -1) {
					return false;
				} else {
					return true;
				}
			},
			seeDetails(cur){
				// 1发售2抢购3转售4用户
				// if(cur.type == 1){
				// 	uni.navigateTo({
				// 		url:`/pages/detail/goodsInfo?index=0`
				// 	})
				// }else if(cur.type == 2){
				// 	uni.navigateTo({
				// 		url:`/pages/detail/index?id=${cur.infoId}&path=sale`
				// 	})
				// }else{
				// 	uni.navigateTo({
				// 		url:`/pages/detail/goodsDetail?id=${cur.infoId}&path=resale`
				// 	})
				// }
			},
			// 跳转到hoder
			goHolder(){
				
			},
			confirm(){//确认取消
				// 1发售2抢购3转售4用户
				this.$nextTick(()=>{
					this.$refs.min_loading.open('正在取消关注！');
				});
				nftuserlike({id:this.cancelAttenyion.id,type:4}).then(res => {
					if (res.data.success) {
						this.goodsList.splice(this.cancelAttenyion.index,1);
						this.$u.toast("已取消");
						
					}else{
						this.$u.toast(res.data.msg);
					}
					this.showModal = false;
				}).catch(err=>{}).finally(() => {
					this.showModal = false;
					this.$refs.min_loading.close();
				});
			},
			// 取消关注
			takeOff(cur,i){
				this.cancelAttenyion.id = cur.infoId;
				this.cancelAttenyion.index = i;
				this.showModal = true;
			},
		},
		onReachBottom() {
			if(this.listQuery.pages > this.listQuery.page){
				this.listQuery.page++;
				this.getNftList();
			}else{
				// this.isEnd = true;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.con-box {
		position: relative;
		min-height: 100vh;
		padding: 150upx 0upx 0;
		.guanbi {
			width: 50upx;
			height: 50upx;
			position: absolute;
			top: 20upx;
			right: 20upx;
			background: url(../../static/user/guanbi.png) no-repeat center center;
			background-size: 100% 100%;
			z-index: 9999;
		}
		.shop-tips {
			background-color: #2A2A2A;
			padding-bottom: 30upx;
			border-radius: 20upx;
			.tip-title {
				margin-top:86upx;
				margin-bottom: 12upx;
				width: 100%;
				font-family: PingFang SC;
				font-style: normal;
				font-size: 30upx;
				line-height: 30upx;
				text-align: center;
				color: #FFFFFF;
				mix-blend-mode: normal;
			}
		
			.tip-text {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				margin-top: 58upx;
				>view{
					width: 188upx;
					height: 60upx;
					border-radius: 30upx;
					text-align: center;
					line-height: 60upx;
					color: #fff;
				}
				.text1{
					margin-left: 54upx;
					background: linear-gradient(95deg, #FA542E, #D30211);
				}
				.text{
					background: linear-gradient(95deg, #717171, #3B3B3B);
				}
			}
		}
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				height: 120upx;
				background-image: url("@/static/common/bg1.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}
		.noData{
			position: absolute;
			width: 220upx;
			height: 180upx;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			.noDataImg{
				width: 220upx;
				height: 180upx;
			}
		}
		.list{
			.followList{
				color: #ffffff;
				background-color: #2C2A2A;
				border-radius: 20upx;
				padding: 10upx 40upx;
				padding-bottom: 20upx;
				margin-bottom: 40upx;
				.followBox{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.focusPeople{
						display: flex;
						align-items: center;
						height: 90upx;
						.focusPeopleImg{
							width: 90upx;
							height: 90upx;
							display: flex;
							align-items: center;
							justify-content: center;
							image{
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
						.focusPeopleInfo{
							height: 90upx;
							padding: 5upx 0;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							margin-left: 20upx;
							.focusPeopleName{
								font-size: 28upx;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: #FFFFFF;
							}
							.focusPeopleNumber{
								font-size: 24upx;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: #ACACAC;
							}
						}
					}
					.follow{
						width: 116upx;
						height: 48upx;
						background: #A61403;
						border-radius: 10upx;
						font-size: 24upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
						display: flex;
						justify-content: center;
						align-items: center;
						.followAdd{
							height: 100%;
							width: 22upx;
							display: flex;
							align-items: center;
							justify-content: center;
							.followAddImg{
								width: 18upx;
								height: 18upx;
							}
						}
						.follows{
							margin-left: 8upx;
						}
					}
					.followText{
						width: 116upx;
						height: 48upx;
						text-align: center;
						border: 2upx solid #ADADAD;
						border-radius: 10upx;
						font-size: 24upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 44upx;
						// padding: 12upx 20upx;
					}
					.followText1{
						text-align: center;
						border: 4upx solid #ADADAD;
						border-radius: 20upx;
						padding: 12upx 20upx;
					}
				}
			}
		}
		.u-modal__content{
			text-align: center;
		}
		::v-deep .u-modal__content__text{
			text-align: center;
			padding: 50upx 0;
		}
	}
</style>
